const commonConfig = require("./webpack.common.config.js");
const merge = require("webpack-merge");


const path = require('path')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const devMode = process.env.NODE_ENV !== 'production';//得先在package.json里设置cross-env NODE_ENV=development
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');//每次打包删除dist目录
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//压缩css文件


const CONFIG = {
  mode: 'production',
  devtool: 'cheap-module-source-map',
  entry: {
    index: './src/index.js',
    //search: './src/js/search.js',
  },
  output: {
    //此处的[name]对应entry的key值
    filename: './js/[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      chunks: 'async'
    },
    minimizer: [new OptimizeCssAssetsPlugin({})],
  },
  plugins: [
     //插件的执行与元素索引有关
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      //需在html使用该语法:<title><%= htmlWebpackPlugin.options.title %></title>
      title: '哈哈标题',
      //最后生成的文件名,要改路径也可以,如:filename: '/lujin/index22.html',
      filename: 'index.html',
      //模板文件
      template: "./src/index.html",
      //chunks的值来自entry的key值
      chunks: ['index']
      //如果entry是多入口,可使用excludeChunks把无关入口写进去
    }),
    /*        new HtmlWebpackPlugin({
               //最后生成的文件名,要改路径也可以,如:filename: '/lujin/index22.html',
               filename: 'detail.html',
               //源文件
               template: "./src/index.html",
               //chunks的值来自entry的key值
               chunks: ['search']
           }), */
  ],
  externals: {
    //externals的key是from后面的值,value是import后面的值
    //比如引入import axios from 'axios'和import $ from 'jquery',
    //"axios": "axios"
    //"jquery":"$"
  }
}

module.exports = merge(commonConfig, CONFIG)